<template>
  <div id="pay">
    <div class="QR" v-if="istrue" @click="paynow">
      <img src="../assets/images/二维码.jpg" alt="">
    </div>
    <div class="top">
      <span @click="goback" class="iconfont"> &#xe6bc;</span>
      <span>支付页面</span>
    </div>
    <div class="bottom" >
      <div class="order">订单号：{{ this.outTradeNo }}</div>
      <div class="price"><span class="money">￥</span>{{ total }}</div>
      <div class="pay">
        请选择支付方式<br />
        <van-radio-group v-model="radio">
          <p><span>支付宝支付</span><van-radio name="1"></van-radio></p>
          <p><span>微信支付</span><van-radio name="2"></van-radio></p>
        </van-radio-group>
      </div>
    </div>
    <div class="footer">
       <button @click="paynow">确认支付</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      istrue:false,
      radio: "1",
      outTradeNo: "",
      total: "",
    };
  },
  methods:{
    paynow(){
      this.istrue=!this.istrue
    }
  },
  mounted() {
    this.outTradeNo = this.$route.query.outTradeNo;
    this.total = this.$route.query.total;
  },
};
</script>

<style  scoped>
#pay {
  overflow: hidden;
  margin: auto;
  height: 100%;
  background-color: #fff;
}
.QR{
  position: absolute;
  left: 0;
  top: 0;
  border-top: 5rem solid rgba(0, 0, 0, 0.5);
  border-right: 2.2rem solid rgba(0, 0, 0, 0.5);
  border-bottom: 5.2rem solid rgba(0, 0, 0, 0.5);
  border-left: 2.2rem solid rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.QR img{
  width: 3.1rem;
  height: 3.1rem;
}
#pay .top {
  height: 1.2rem;
  width: 100%;
  background-color: #ff7560;
  display: flex;
  justify-content: space-between;
}
#pay .top span {
  color: #fff;
  font-size: 0.36rem;
  display: block;
  line-height: 1.2rem;
}
#pay .top span:nth-child(1) {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  line-height: 1rem;
}
#pay .top span:nth-child(2) {
  margin-right: 3rem;
}
#pay .bottom {
  height: 87vh;
}

#pay .bottom .order {
  margin-top: 0.5rem;
  color: #9b9a9a;
  font-size: 0.3rem;
  text-align: center;
}
#pay .bottom .price {
  font-size: 0.8rem;
  margin-top: 0.3rem;
  text-align: center;
}
#pay .bottom .price .money {
  font-size: 0.4rem;
}
#pay .bottom .pay {
  margin-top: 0.8rem;
  font-size: 0.3rem;
  padding: 0 0.2rem;
}
#pay .bottom .pay .van-radio-group{
  font-size: 0.3rem;
  margin-top: 0.2rem;
  line-height: 0.6rem;
}
#pay .bottom .pay .van-radio-group p {
  display: flex;
  justify-content: space-between;
}
#pay .footer {
  position: fixed;
  bottom: 0.3rem;
  left: 0.3rem;
}
#pay .footer button{
  background-color: skyblue;
  width: 6.9rem;
  height: 0.8rem;
  color: #fff;
  font-size: 0.3rem;
  outline: none;
  border-color: transparent;
  border-radius: 0.4rem;
}
</style>